<template>
    <view class="cus-page">
        <image class="logo" src="/static/logo.png" alt=""></image>

        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
			<u-form-item prop="phone" borderBottom>
				<u-input 
                    type="number"
                    v-model="form.phone" 
                    clearable
                    border="none"
                    placeholder="请输入手机号码">
                    <template slot="prefix">
                        <u-icon name="/static/me/phone.png" size="44rpx" color="#212122"></u-icon>
                    </template>
                    <template slot="suffix">
                        <text class="com-font-32 com-active-color">获取验证码</text>
                    </template>
                </u-input>
			</u-form-item>
            <u-gap height="40rpx" bgColor="transparent"></u-gap>
            <u-form-item prop="code" borderBottom>
				<u-input 
                    type="number"
                    v-model="form.code" 
                    clearable
                    border="none"
                    placeholder="请输入验证码">
                    <template slot="prefix">
                        <u-icon name="/static/me/code.png" size="44rpx" color="#212122"></u-icon>
                    </template>
                </u-input>
			</u-form-item>
		</u--form>

        <u-button text="登录" 
            shape="circle"
            color="linear-gradient(-90deg, #C3B0FF 0%, #39E3FD 100%)"
            :customStyle="{width:'622rpx',height:'90rpx',marginTop:'38rpx',fontSize:'32rpx'}"
            @click="submit">
        </u-button>
    </view>
</template>


<script>
export default {
    name:'login',
    components: {},
    props:{},

    data () {
        return {
            form: {
                phone: '',
                code: '',
			},
            rules:{
                phone: [
                    { required: true,  message: '请输入手机号', trigger: ['change','blur'], },
                    {
                        validator: (rule, value, callback) => {
                            return uni.$u.test.mobile(value);
                        },
                        message: '手机号码不正确',
                        trigger: ['change','blur'],
                    }
                ],
                code: [
                    { required: true, message: '此为必填字段', trigger: ['blur', 'change'], },
                    { min: 4, max: 4, message: '长度为4个字符' },
                ]
            }
        }
    },

    computed: {},
    watch: {},

    mounted() {},
    onReady() {
        // #ifdef MP-WEIXIN
        this.$refs.uForm.setRules(this.rules)
        // #endif
    },

    methods: {
        submit() {
			this.$refs.uForm.validate().then(res => {
				uni.$u.toast('校验通过')
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
		}
    },
}
</script>


<style scoped lang='scss'>
    .cus-page{
        width: 100vw;
        height: 100vh;
        background: #FFF;
        display: flex;
        flex-direction: column;
        align-items: center;
        .logo{
            width: 160rpx;
            height: 160rpx;
            margin-top: 140rpx;
            border-radius: 24rpx;
        }
        /deep/.u-form{
            width: 622rpx;
            margin-top: 104rpx;
            .u-form-item__body{
                padding: 20rpx 0 !important;
            }
            .u-line{
                border-bottom: 1px solid #eee !important;
                border-top-color: #eee !important;
                border-right-color: #eee !important;
                border-left-color: #eee !important;
            }
        }
    }
</style>